import React, { useEffect, useState } from 'react';
import '../styles/Register.scss'
import { Button, Checkbox, Form, Input, notification, Select } from 'antd';
import { useNavigate } from 'react-router-dom';
import { role_list, staff_register } from '../utils/api';

interface Props {

}
function Register(props: Props) {

    var navigate = useNavigate()

    // 表单验证通过，执行
    const onFinish = (values: any) => {
        // console.log(values);

        staff_register(values).then((res) => {
            if (res.data.code == 200) {
                notification.success({ message: '注册成功！' });
                navigate('/login');//跳转登录页
            } else if (res.data.code == 400) {
                notification.success({ message: '该用户已存在！' });
            }
            // console.log(res.data);

        })
    }

    // 角色列表
    var [options, setOptions] = useState([])

    // 引入生命周期
    useEffect(() => {
        // 请求角色列表
        role_list().then((res) => {
            // 处理服务器返回的角色列表
            var arr = res.data.list.map((item: any) => {
                return { label: item.name, value: item._id }
            })
            // console.log(arr);

            setOptions(arr);
        })
    }, [])

    const tiao = () => {
        navigate('/login');
    }

    return (
        <div className='register'>
            <div className="form-box">
                <Form
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="账号"
                        name="user"
                        rules={[{ required: true, message: '输入账号' }]}
                    >
                        <Input placeholder='输入账号' />
                    </Form.Item>

                    <Form.Item
                        label="昵称"
                        name="nickname"
                        rules={[{ required: true, message: '输入昵称' }]}
                    >
                        <Input placeholder='输入昵称' />
                    </Form.Item>

                    <Form.Item
                        label="姓名"
                        name="name"
                        rules={[{ required: true, message: '输入姓名' }]}
                    >
                        <Input placeholder='输入姓名' />
                    </Form.Item>

                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={[{ required: true, message: '输入手机号', pattern: /^1[3-9]\d{9}$/ }]}
                    >
                        <Input placeholder='输入手机号' />
                    </Form.Item>

                    <Form.Item
                        label="角色"
                        name="role"
                        rules={[{ required: true, message: '选择角色' }]}
                    >
                        <Select
                            style={{ width: 120 }}
                            options={options}
                        />
                    </Form.Item>


                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            注册
                        </Button>
                        <Button onClick={tiao} style={{ marginLeft: 20 }}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Register;